<template>
	<view style="flex-direction: column; flex: 1;">

		<block v-for="(item,index) in productList" :key="index">

			<view class="">
				<view style="flex-direction: column; flex: 1;">
					<view style="height: 750upx;">
						<image :src="item.img" mode="" style="width: 100%; height: 100%;"></image>
					</view>
					<view style="padding-top: 30upx; padding-left: 20upx; padding-right: 20upx; font-size: 30upx; font-weight: bold;">
						{{item.title}}</view>
					<view style="padding: 20upx;">
						<view>
							<view>
								¥{{item.price}}
							</view>
							<view style="padding-left: 20upx;">
								{{item.seller_count}}
							</view>
						</view>
						<view style="flex: 1; justify-content: flex-end;">
							<view>
								<button type="warn" size="mini" :data-item="item" @tap="buy">购买</button>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="background-color: #8F8F94; height: 20upx;"></view>
		</block>

	</view>
</template>

<script>
	var self;
	export default {
		 data() {
		  return {
			productList: [],
      }
		},
		async onLoad() {
			self = this;
			let page = 1;
			let url = `https://api.beidian.com/mroute.html?method=beidian.h5.shop.product.list&page=${page}&shop_id=682731`;
			uni.request({
				url: url,
				success(res) {
					const data = res.data;
					self.productList = data.shop_products;
				}
			})
		},
		methods: {
			buy(e) {
        //获取自定义属性的值
				const item = e.target.dataset.item;
				console.log(item)
				//https://m.beidian.com/detail/detail.html?iid=29064225&shop_id=682731
				let iid = item.iid;
				let api = `https://m.beidian.com/detail/detail.html?iid=${iid}&shop_id=682731`;
				// 贝店程序限制，WebView模式下无法打开详情页，调用外部浏览器打开
				// #ifdef APP-PLUS
				plus.runtime.openURL(api)
				// #endif
				// 微信小程序中暂时没有解决方案
				// #ifdef MP-WEIXIN
				uni.setClipboardData({
					data: api,
					success: function() {
						uni.showModal({
							title: '提示',
							content: '链接已复制，请在浏览器中访问',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
				})
				// #endif
			}
		}
	}
</script>

<style>
	view {

		/* 			margin: 10upx;
		border: #8F8F94 solid 1upx; */

		display: flex;
		flex-direction: row;

		font-size: 28upx;
	}
</style>
